"bootstrap nav covert in canvas off sidebar in mobile"
Bootstrap 3.3.0 Snippet by Gurmeet Singh

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.6.3/font-awesome.min.css"
integrity="sha384-Wrgq82RsEean5tP3NK3zWAemiNEXofJsTwTyHmNb/iL3dP/sZJ4+7sOld1uqYJtE" crossorigin="anonymous">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="menu"><i class="fa fa-bars" id="menu_icon"></i></a>
<a class="navbar-brand" href="#">WebSiteName</a>
</div><!--navbar-header close-->
<div class="collapse navbar-collapse drop_menu" id="content_details">
<ul class="nav navbar-nav">
<li><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="glyphicon glyphicon-font"></span> About<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Company</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Timing</a></li>
</ul><!--dropdown-menu close-->
</li>
<li><a href="#"><span class="glyphicon glyphicon-heart-empty"></span> Gallery</a></li>
<li><a href="#"><span class="glyphicon glyphicon-phone"></span> Contact</a></li>
</ul><!--nav navbar-nav close-->
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul><!--navbar-right close-->
</div><!--collapse navbar-collapse drop_menu close-->
</div><!--container-fluid close-->
</nav><!--navbar navbar-inverse close-->
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.navbar-inverse {background-color: #0e364c;border-color: #0e364c;border-radius: 0px;height:50px;width:100%;position: fixed;}
.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus {
color: #fff;background-color: #0e364c;}
.navbar-inverse .navbar-nav>li>a {color: #00BCD4;font-family: 'Open Sans', sans-serif;}
.menu { display:none;}
@media all and (max-width:768px){
.navbar-inverse .drop_menu {display: block;visibility: visible;width: 110px;height:1000px;padding:0px 20px;position: absolute;right:-100px;
transition:all ease 0.5s;border-top: 0px solid;cursor: pointer;}
a.menu { display:block !important;margin: 9px 2px;float: right;color: #00bcd4; border:0px solid; background:none; font-size:30px;width:27px;position: relative;
cursor:pointer;}
.drop_menu1 { display: block;visibility: visible;width:250px;height:1000px;padding:5px 30px;position: absolute;right:0 !important;
background-color: #0e364c !important; transition:all ease 0.5s;border-top: 0px solid;cursor: pointer;top: 50px;}
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(document).ready(function(e) {
$('#menu_icon').click(function(){
if($("#content_details").hasClass('drop_menu'))
{
$("#content_details").addClass('drop_menu1').removeClass('drop_menu');
}
else{
$("#content_details").addClass('drop_menu').removeClass('drop_menu1');
}
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Kit 2 PRO
sidebar.rtl
BS4 Login, Register FORM + Mobile
Content + Sidebar BS4

Questions / Comments: